<template>
  <k-view class="container-all">
    <k-view :class="[authType === 2 ? 'header' : '']">
      <top-banner :authType="authType" @jumpStatement="hasJumpStatement"></top-banner>
      <search-bar :authType="authType"></search-bar>
      <page-tabs
        :modelValue="activeTab"
        :tabList="tabList"
        :authType="authType"
        @change="handleTabChange"
      ></page-tabs>
    </k-view>
    <PurchasedBar v-if="showPurchasedBar" />
    <all-view :theme="theme" v-if="activeTab === 1"></all-view>
    <stock-view :theme="theme" v-if="activeTab === 2"></stock-view>
    <industry-view :theme="theme" v-if="activeTab === 3"></industry-view>
    <region-view :theme="theme" v-if="activeTab === 4"></region-view>
    <page-footer></page-footer>
  </k-view>
</template>

<script>
import Apis from '@king-fisher/apis';
import topBanner from '../../components/Home/topBanner.vue';
import searchBar from '../../components/Home/serachBar.vue';
import pageTabs from '../../components/Home/pageTabs.vue';
import PageFooter from '@/components/Home/pageFooter.vue';
import PurchasedBar from '@/components/Home/PurchasedBar.vue';

import AllView from './all.vue';
import IndustryView from './industry.vue';
import StockView from './stock.vue';
import RegionView from './disct.vue';

import { getNativeSelfCodeList } from '@/utils/selfCode';
import { getRankingList, getAuth } from '@/apis';
import { sendClickStat, sendOnceStat, sendPageStat } from '@/utils/stat';
import { INDEX_TAB_ID, PAGEID } from '@/config/stat';
import themeMixin from '../../mixins/themeMixin';
import { setCookie } from '@/utils';
import fl from '@king-fisher/falcon';

export default {
  components: {
    topBanner,
    searchBar,
    pageTabs,
    PageFooter,
    AllView,
    IndustryView,
    StockView,
    RegionView,
    PurchasedBar,
  },
  data() {
    return {
      text: '全部',
      activeTab: 1,
      scoreList: [],
      authType: 0,
      showPurchasedBar: false,
    };
  },
  mixins: [themeMixin],
  methods: {
    handleTabChange(current) {
      // 只有此处才是点击切换页面tab
      if (this.activeTab === current) {
        return;
      } else {
        sendClickStat(`${PAGEID.INDEX}.tab.${INDEX_TAB_ID[current]}.click`);
        this.activeTab = current;
      }
    },
    getSelfCodeList() {
      getNativeSelfCodeList().then(res => {
        if (res && res.selfCodeList) {
          if (res.selfCodeList.length > 4) {
            sendOnceStat(`${PAGEID.INDEX}.tab.zixuan.show`);
            this.getRankList(res.selfCodeList);
          }
        }
      });
    },
    getAuthType() {
      getAuth()
        .then(res => {
          if (res.status_code) {
            Apis.Toast.show('数据异常，请稍后重试！');
          } else {
            const hasBaseAuth = res.data.ssgsjkzszs;
            const hasPremiumAuth = res.data.ssgsjkzszyb;
            this.authType = hasPremiumAuth ? 2 : hasBaseAuth ? 1 : 0;
            this.showPurchasedBar = !hasPremiumAuth;
          }
        })
        .catch(() => {
          Apis.Toast.show('数据异常，请稍后重试！');
        });
    },
    async getRankList(selfCodeList) {
      const codeList = selfCodeList.map(item => item.stockcode);
      const res = await getRankingList({
        block_type: 'stock',
        page_size: '10',
        page_num: '0',
        stock_codes: codeList.join(','),
        sort_field: 'composite_score',
        sort_mod: 'desc',
      });
      if (res.status_code !== 0) {
        Apis.Toast.show('暂未查询到相关信息');
        return;
      }
      this.scoreList = res.data.list;
    },
    hasJumpStatement() {
      fl.onAppear(() => {
        this.getAuthType();
      });
    },
  },
  mounted() {
    setCookie().then(id => {
      sessionStorage.setItem('userIdKey', id);
      sendPageStat(`${PAGEID.INDEX}`);
    });
    this.getAuthType();
    this.getSelfCodeList();
  },
  computed: {
    tabList() {
      return [
        {
          id: 1,
          name: '全部',
          index: 1,
          show: true,
        },
        {
          id: 2,
          name: '自选',
          index: 2,
          show: this.scoreList?.length > 4,
        },
        {
          id: 3,
          name: '行业',
          index: 3,
          show: true,
        },
        {
          id: 4,
          name: '地区',
          index: 4,
          show: true,
        },
      ];
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  background-image: linear-gradient(133deg, #e5caaa 0%, #d8bda1 68%, #f0dfce 100%);
}
</style>
<style lang="less">
.container-all {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
}

[theme-mode='black'] {
  .container-all {
    background-color: #0f0f0f;
  }
}
</style>
